<template>
	<view>
		<view class="tabBox">
			
		</view>
		<view class="waitListBox">
			<mescroll-body ref="mescroll" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
				<block v-for="(item, index) in waitList" :key="index">
					<view class="column-css view-cente" @click="onDetail(item)">
						<view class="time">
							{{item.operationTime}}
						</view>
						<view class="bgW">
							<view class="headBox">
								<image src="../../static/icon_client.png" mode=""></image>
								<text>{{item.title}}</text>
							</view>
							<view>
								<view class="waitWord">
									<p>运单号： {{item.waybillStatus == 1? item.waybillNo: item.loadingOrderNo}}</p>
									<p>客户单号： {{item.custNo}}</p>
									<view v-if="item.waybillStatus == 1">
										<p>运单状态：
											<text>
											待接单
											</text>
										</p>
										<p>发布时间： {{item.operationTime}}</p>
									</view>
									<view v-if="item.waybillStatus == 2">
										<p>运单状态：
											<text class="getText">
											已接单
											</text>
										</p>
										<p>接单时间： {{item.operationTime}}</p>
									</view>
									<view v-if="item.waybillStatus == 3">
										<p>运单状态：
											<text class="getText">
											运输中
											</text>
										</p>
										<p>起运时间： {{item.operationTime}}</p>
									</view>
									<view v-if="item.waybillStatus == 4">
										<p>运单状态：
											<text class="getText">
											已到达
											</text>
										</p>
										<p>到达时间： {{item.operationTime}}</p>
									</view>
									<view v-if="item.waybillStatus == 5">
										<p>运单状态：
											<text class="getText">
											已回单
											</text>
										</p>
										<p>回单上传时间： {{item.operationTime}}</p>
									</view>
									<view v-if="item.waybillStatus == 6">
										<p>运单状态：
											<text class="getText">
											回单已确认
											</text>
										</p>
										<p>回单确认时间： {{item.operationTime}}</p>
									</view>
									<view v-if="item.waybillStatus == 7">
										<p>运单状态：
											<text class="getText">
											取消申请中
											</text>
										</p>
										<p>取消发起时间： {{item.operationTime}}</p>
									</view>
									<view v-if="item.waybillStatus == 8">
										<p>运单状态：
											<text class="getText">
											已取消
											</text>
										</p>
										<p>取消成功时间： {{item.operationTime}}</p>
									</view>
									<view v-if="item.waybillStatus == 9">
										<p>运单状态：
											<text class="getText">
											返回前一节点
											</text>
										</p>
										<p>取消驳回时间： {{item.operationTime}}</p>
									</view>
								</view>
								<view class="waitBtn" >
									查看详情
								</view>
							</view>
						</view>
						
					</view>
				</block>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import MescrollBody from '@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBody
		},
		data() {
			return {
				messageCount: '',
				waitDoCount: '',
				seledTab: '1',
				driverId: uni.getStorageSync(this.DATA_KEY.userInfo).driverId,
				DriverMessageBusiness:'',
				DriverMessageCapital:'',
				DriverMessageCertification:'',
				buesinessNum: '',
				capiatlNum: '',
				certificationNum: '',
				waitList: [],
				page: 1,
				pageSize: 10,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				}
			}
		},
		onLoad: function(options) {
			// this.onwaybill()
		},
		onShow: function() {
			this.onwaybill()
		},
		methods: {
			//待办的方法
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调*/
			downCallback(mescroll) {
				mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {
				this.page = mescroll.num; // 页码, 默认从1开始
				//联网加载数据
				this.onwaybill(mescroll);
			},
			//获取待办事项
			onwaybill(mescroll) {
				this.wxRequest({
					url: `${this.API}/driverMessageBusiness/queryList`,
					method: 'POST',
					data: {
						"driverId": this.driverId,
						  "pageNum": this.page,
						  "pageSize": this.pageSize,
						  "type":"2"
					},
					title: '加载中...',
					success: res => {
						let list = res.data.data.list;
						if (this.page == 1) {
							this.waitList = [];
						}
						for (let i = 0; i < list.length; i++) {
							this.waitList.push(list[i]);
						}
						if (mescroll != null) {
							mescroll.endBySize(this.waitList.length, res.data.data.total);
							setTimeout(() => {
								this.mescroll.endSuccess(this.waitList.length);
							}, 20);
						}
					}
				})
			},
			//跳转到对应页面
			onDetail(val){
				let data = JSON.stringify(val)
				// this.allRead(val.id)
				uni.navigateTo({
					url: `/pages/task/taskdetail?data=${data}`
				});
				
			},
			allRead(id){
				let data = {
					  "driverId": this.driverId,
					  "tableName": 'driver_message_business',
					  "id": id,
				}
				this.wxRequest({
					url: `${this.API}/driverMessageCommon/updateMessageStatus`,
					method: 'POST',
					data: data,
					success: res => {
						if(res.data.code == 0){
							// uni.showToast({
							// 	title: '',
							// 	icon: 'none'
							// });
							// this.onwaybill()
						}
					}
				})
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
		height: 100%;
	}
	.allRead{
		text-align: right;
		color: #aab3bc;
		padding: 20rpx;
	}
	.row-css {
		display: flex;
		flex-direction: row;
	}

	.column-css {
		display: flex;
		flex-direction: column;
		margin: 20rpx;
	}
	.waitListBox{
		background-color: #efeeee;
		.column-css{
			font-size: 28rpx;
			.time{
				text-align: center;
				font-size: 32rpx;
				color: #8b929a;
				line-height: 80rpx;
			}
			.bgW{
				background: #FFF;			
				padding: 30rpx 30rpx 0 30rpx;
				border-radius: 8rpx;
			}
		}
		.headBox{
			display: flex;
			line-height: 60rpx;
			font-size: 34rpx;
			color: #2979ff;
			image{
				width:60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
		}
		.waitWord{
			font-size: 32rpx;
			padding-top: 20rpx;
			color: #8b929a;
			padding-bottom: 60rpx;
			border-bottom: 1rpx solid #e3e3e3;
			p{
				line-height: 40rpx;
				margin-bottom: 10rpx;
				.seltext{
					color: #ff0101;
				}
				.getText{
					color: #2979ff;
				}
			}
		}
		.waitBtn{
			text-align: center;
			color: #2979ff;
			line-height: 90rpx;
		}
	}
</style>
